<template>
  <div
    :class="{
      'device-card-wrapper': true,
      yellow: color === 'yellow' ? true : false,
      red: color === 'red' ? true : false
    }"
  >
    <div class="device-card-body">
      <div class="content--mask">
        <i class="iconfont iconfont-dianliu" v-if="type === 'current'"></i>
        <i class="iconfont iconfont-sheshidu" v-else></i>
      </div>
      <div class="d-c-content--left">
        <div>
          <i class="iconfont iconfont-dianliu" v-if="type === 'current'"></i>
          <i class="iconfont iconfont-sheshidu" v-else></i>
        </div>
      </div>
      <div class="d-c-content--right">
        <p>{{ title }}</p>
        <p>
          <vue-content-to
            :startVal="0"
            :endVal="Number(value)"
          ></vue-content-to>
          <span>({{ unit }})</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import VueCountTo from 'vue-count-to'
export default {
  props: {
    type: {
      type: String,
      default: 'current'
    },
    color: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: ''
    }
  },
  components: {
    'vue-content-to': VueCountTo
  }
}
</script>
<style lang="scss" scoped>
.device-card-wrapper {
  margin-bottom: 20px;
  display: flex;
  border-radius: 5px;
  background-color: #2dce89;
  &.red {
    background-color: #e7505a;
  }
  &.yellow {
    background-color: #ff9900;
  }

  .device-card-body {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    .d-c-content--left {
      float: left;
      width: 66px;
      height: 66px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #fff;
        line-height: 40px;
        overflow: hidden;
        color: #fff;
        i {
          font-size: 24px;
        }
      }
    }
    .d-c-content--right {
      margin-left: 66px;
      text-align: center;
      color: #fff;
      position: relative;
      > p {
        &:nth-child(1) {
          font-size: 20px;
          font-weight: 500;
          letter-spacing: 2px;
        }
        &:nth-child(2) {
          font-size: 24px;
          font-weight: 500;
          > span {
            &:nth-child(2) {
              font-size: 14px;
            }
          }
        }
      }
    }
    .content--mask {
      position: absolute;
      font-size: 35px;
      line-height: 1;
      right: -19px;
      bottom: -7px;
      > i {
        color: #fff;
        opacity: 0.2;
        filter: alpha(opacity=20);
        font-size: 2em;
      }
    }
  }
}
</style>
